import React, { memo, Component } from 'react'
import { Image, Avatar, Button, Input, Select, Table } from 'antd'
import './index.less'
import { baseUrl } from '../../assets/baseUrl'
import { getEmailHistory, sendEmail, readAll, deleteMail } from '@/api/user'
import { Upload, Modal, message, Tabs } from 'antd'
import { PlusOutlined } from '@ant-design/icons'
import { formatDate, getParam } from '../../utils/tool'
const BaseUrl = baseUrl()
const { TabPane } = Tabs
const { TextArea } = Input
class myEail extends Component {
  constructor(props) {
    super(props)
    this.state = {
      dataSource: [], //收件箱表格数据
      sendDataSource: [], //发件箱表格数据
      sendVisible: false, //发送邮件弹窗
      studentId: null, //发送邮件，接收者ID
      content: null, //邮件内容
      title: null, //邮件标题
      tabKey: getParam(this.props.location.search, 'tabKey') || 1,
      loading:true,
    }
  }
  componentDidMount() {
    this.getTable()
  }

  //获取邮箱历史
  getTable = () => {
    getEmailHistory().then((res) => {
      if (res.data?.getEmails?.length > 50) {
        message.warn('你的收件箱容量不足，请及时清理')
      }
      if (res.data?.sendEmails?.length > 50) {
        message.warn('请及时清理已发邮件')
      }
      this.setState({
        dataSource: res.data?.getEmails,
        sendDataSource: res.data?.sendEmails,
        loading:false
      })
    })
  }

  goToMailDetail = (row) => {
    let { tabKey } = this.state
    this.props.history.replace(
      `/home/myCenter/emailDetail?mailId=${row.mailId}&tabKey=${tabKey}&studentId=${row.studentId}`
    )
  }

  handleCancel = () => {
    this.setState({
      sendVisible: false
    })
  }

  //发送邮件
  handleOk = () => {
    const { studentId, title, content } = this.state
    let data = {
      studentId,
      title,
      content
    }
    sendEmail(data).then((res) => {
      if (res.data.code == 200) {
        this.setState({
          sendVisible: false, //发送邮件弹窗
          studentId: null, //发送邮件，接收者ID
          content: null, //邮件内容
          title: null //邮件标题
        })
        message.success(res.data.message)
      } else message.error(res.data.message)
    })
  }

  chooseTab = (key) => {
    this.setState({
      tabKey: key
    })
  }
  clickDeleteMail = (row) =>{
    this.setState({
        loading:true
    },()=>{
        deleteMail({mailId:row.mailId}).then(res=>{
            if(res?.data?.code === 200)
                message.success(res.data.message)
                this.getTable()
        })
    })
  }
  render() {
    const { dataSource, studentId, content, title, sendDataSource, tabKey, loading } =
      this.state
    const columns = [
      {
        title: '发送人',
        dataIndex: 'senderNick',
        align: 'center',
        key: 'senderNick'
      },
      {
        title: '标题',
        dataIndex: 'title',
        align: 'center',
        key: 'title'
      },
      {
        title: '时间',
        dataIndex: 'sendTime',
        align: 'center',
        key: 'sendTime'
      },
      {
        title: '过期时间',
        dataIndex: 'expTime',
        align: 'center',
        key: 'expTime',
        render: (item) => {
          return formatDate(item * 1000).split(' ')[0]
        }
      },
      {
        title: tabKey == 2 ? '对方状态' : '状态',
        dataIndex: 'hasread',
        align: 'center',
        key: 'hasread',
        render: (item) => {
          return item === 0 ? (
            <div style={{ color: 'red' }}>未读</div>
          ) : (
            <div style={{ color: 'green' }}>已读</div>
          )
        }
      },
      {
        title: '操作',
        dataIndex: 'hasread',
        align: 'center',
        key: 'hasread',
        render: (item, row) => {
          return (
            <div>
              <span
                style={{ cursor: 'pointer' }}
                onClick={this.goToMailDetail.bind(this, row)}
              >
                查看
              </span>
              {tabKey == 1 && <span
                style={{ cursor: 'pointer',marginLeft:12,color:'red' }}
                onClick={this.clickDeleteMail.bind(this, row)}
              >
                删除
              </span>}
            </div>
          )
        }
      }
    ]
    // //收件箱分页器
    // const getPagination = {
    //   current: this.state.getPageNum,
    //   pageSize: this.state.getPageSize,
    //   onChange: (e) => {
    //     this.setState(
    //       {
    //         getPageNum: e
    //       },
    //       () => {
    //         this.getList()
    //       }
    //     )
    //   },
    //   total: this.state.getTotal
    // }
    // //发件箱分页器
    // const sendPagination = {
    //     current: this.state.pageNum,
    //     pageSize: this.state.pageSize,
    //     onChange: (e) => {
    //       this.setState(
    //         {
    //           pageNum: e
    //         },
    //         () => {
    //           this.getList()
    //         }
    //       )
    //     },
    //     total: this.state.total
    //   }
    return (
      <div className="myEail-all-box">
        <div className="buttons-box">
          {tabKey == 1 && (
            <Button
              type="primary"
              className="sendEmail"
              onClick={() => {
                readAll().then((res) => {
                  if (res.data.success) message.success(res.data.message)
                  this.getTable()
                })
              }}
            >
              一键已读
            </Button>
          )}

          <Button
            type="primary"
            className="sendEmail"
            onClick={() => {
              this.setState({ sendVisible: true })
            }}
          >
            发邮件
          </Button>
        </div>
        <Tabs defaultActiveKey={tabKey} onChange={this.chooseTab.bind(this)}>
          <TabPane tab="收件箱" key="1">
            <Table dataSource={dataSource} columns={columns} loading={loading}/>
          </TabPane>
          <TabPane tab="已发邮件" key="2">
            <Table dataSource={sendDataSource} columns={columns} loading={loading}/>
          </TabPane>
        </Tabs>

        <Modal
          title="发送邮件"
          visible={this.state.sendVisible}
          onOk={this.handleOk}
          onCancel={this.handleCancel}
          okText="发送"
          cancelText="取消"
        >
          <div>
            <ul>
              <li>
                接收人UID：
                <Input
                  value={studentId}
                  onChange={(e) => this.setState({ studentId: e.target.value })}
                ></Input>
              </li>
              <li>
                邮件标题：
                <Input
                  value={title}
                  onChange={(e) => this.setState({ title: e.target.value })}
                ></Input>
              </li>
              <li>
                邮件内容：
                <TextArea
                  value={content}
                  onChange={(e) => this.setState({ content: e.target.value })}
                  row={4}
                ></TextArea>
              </li>
            </ul>
          </div>
        </Modal>
      </div>
    )
  }
}
export default memo(myEail)
